<template>
  <ul>
    <li @mouseover="handleOver" @mouseleave="handleLeave">{{content}}
      <img class='image' @click="handleClick" src="../assets/close.png" v-show="showClose"></img></li>
  </ul>
</template>

<script>
  export default {
    props: ['content', 'index'],
    data() {
      return {
        showClose: false,
      }
    },
    methods: {
      handleClick() {
        this.$emit('delete', this.index)
      },
      handleOver() {
        this.showClose = true;
      },
      handleLeave() {
        this.showClose = false;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.image{
  width: 13px;
  height: 13px;
}
</style>
